<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .img1{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        h3 a{
            text-decoration: none;
            color: black;
        }

    </style>
</head>
<body>
<h3>
    <a href="">订单列表</a>
</h3>

<div id="ordersapp">
    <label>订单编号:</label>
    <el-input v-model="orderId" placeholder="请输入订单编号" style="width: 200px"></el-input>
    <label>交易时间:</label>
    <el-date-picker
            v-model="dealTime"
            type="date"
            placeholder="选择日期"
            @change="dateChange(dealTime)">
    </el-date-picker>

    <el-button type="primary" icon="el-icon-search" @click="inquire" >查询</el-button><br>
    <el-button type="primary"  @click="dialogFormVisible = true">添加订单</el-button><br><br>
    <el-dialog title="添加订单" :visible.sync="dialogFormVisible">
        <el-form :model="order">
            <el-form-item label="订单编号：">
                <el-input v-model="order.orderId"></el-input>
            </el-form-item>
            <el-form-item label="客户名称：">
                <el-select v-model="order.customId" placeholder="请选择客户名称">
                    <el-option
                            v-for="customer in customers"
                            :label="customer.name"
                            :value="customer.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付方式：">
                <el-select v-model="order.orderType" placeholder="请选择支付方式">
                    <el-option label="线上" value="线上"></el-option>
                    <el-option label="线下" value="线下"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下单者：">
                <el-select v-model="order.operator" placeholder="请选择下单者">
                    <el-option
                            v-for="user in users"
                            :label="user.realname"
                            :value="user.realname">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品名称：">
                <el-select v-model="order.productId" placeholder="请选择产品名称">
                    <el-option
                            v-for="product in products"
                            :label="product.pname"
                            :value="product.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="交易金额：">
                <el-input v-model="order.money" ></el-input>
            </el-form-item>
            <el-form-item label="数量：">
                <el-input v-model="order.number"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false;add()">确 定</el-button>
        </div>
    </el-dialog>
    <span>订单状态说明： 已支付-1 待发货-2 已发货-3  已完成-4 未审核0 已审核1</span><br>
    <el-table
            :data="orders"
            style="width: 100%">
        <el-table-column
                label="序号"
                width="50px">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单类型">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.product.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="客户名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.customer.name }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="支付方式">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.payType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易金额">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.money }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易时间">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.dealTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="所属分类">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.product.penterprise }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="数量">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <div v-if="scope.row.orderStatus == '0'" style="background-color:#ff1b0e;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">未审核</span></div>
                <div v-if="scope.row.orderStatus == '1'" style="background-color:#a2ff6d;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">已审核</span></div>
                <div v-if="scope.row.orderStatus == '-1'" style="background-color:#2ce530;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">已支付</span></div>
                <div v-if="scope.row.orderStatus == '-2'" style="background-color:yellow;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">待发货</span></div>
                <div v-if="scope.row.orderStatus == '-3'" style="background-color:#ff861c;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">已发货</span></div>
                <div v-if="scope.row.orderStatus == '-4'" style="background-color:#3eff1b;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">已完成</span></div>
               <!-- <span style="margin-left: 10px">{{ scope.row.orderStatus }}</span>-->
            </template>
        </el-table-column>
        <el-table-column
                label="说明">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.explain }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button
                        type="primary"
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row);">审核</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"
            @current-change="loadOrders">
    </el-pagination>
</div>
<script>
    new Vue({
        el:"#ordersapp",
        data(){
            return {
                orders: [],
                current: 1,
                total: 0,
                pageSize: 5,
                dealTime: "",
                orderId: "",
                dialogFormVisible:false,
                order:{},
                users:[],
                customers:[],
                products:[],
            }
        },
        methods: {
            loadOrders(current) {
                axios.get("/orders/list/" + current + "/" + this.pageSize + "?orderId=" + "" + "&dealTime=" + "")
                    .then(res => {
                        this.orders = res.data.data;
                        this.current = res.data.current;
                        this.total = res.data.count;
                        console.log(this.orders);
                        console.log(res.data.data.customer)
                        /*for (let i =0;i< this.orders.length; i++){
                            if(this.orders[i].orderStatus=="-1"){
                                this.orders[i].orderStatus="已付款"
                            }else if(this.orders[i].orderStatus=="-2"){
                                this.orders[i].orderStatus="待发货"
                            }else if(this.orders[i].orderStatus=="-3"){
                                this.orders[i].orderStatus="已发货"
                            }else if(this.orders[i].orderStatus=="-4"){
                                this.orders[i].orderStatus="已完成"
                            }else if(this.orders[i].orderStatus=="0"){
                                this.orders[i].orderStatus="未审核"
                            } else if(this.orders[i].orderStatus=="1"){
                                this.orders[i].orderStatus="已审核"
                            }
                        }
                        console.log(this.orders[0].customer.name);*/
                    })
            },
            loadUser(){
                axios.get("/users")
                .then(res =>{
                    this.users=res.data;
                })
            },
            loadCustoms(){
                axios.get("/customers")
                    .then(res =>{
                        this.customers=res.data;
                    })
            },
            loadProducts(){
                axios.get("/products")
                    .then(res =>{
                        this.products=res.data;
                    })
            },
            inquire(){

                if(this.dealTime==null){
                    this.dealTime="";
                }
                axios.get("/orders/list/" + this.current + "/" + this.pageSize + "?orderId=" + this.orderId + "&dealTime=" + this.dealTime)
                    .then(res => {
                        this.orders = res.data.data;
                        this.current = res.data.current;
                        this.total = res.data.count;

                       /* for (let i =0;i< this.orders.length; i++){
                            if(this.orders[i].orderStatus=="-1"){
                                this.orders[i].orderStatus="已付款"
                            }else if(this.orders[i].orderStatus=="-2"){
                                this.orders[i].orderStatus="待发货"
                            }else if(this.orders[i].orderStatus=="-3"){
                                this.orders[i].orderStatus="已发货"
                            }else if(this.orders[i].orderStatus=="-4"){
                                this.orders[i].orderStatus="已完成"
                            }else if(this.orders[i].orderStatus=="0"){
                                this.orders[i].orderStatus="未审核"
                            } else if(this.orders[i].orderStatus=="1"){
                                this.orders[i].orderStatus="已审核"
                            }
                        }*/

                    })
            },
            handleEdit(aa,row){
                let r=JSON.parse(JSON.stringify(row));
               if(r.orderStatus == "0"){
                   r.orderStatus="1";

                   axios.put("/order2",r)
                       .then(res =>{
                           if(res.data=="ok"){
                               this.$message({
                                   message:'更新成功',
                                   type:'success'
                               })
                           }
                           this.loadOrders(1);
                       })
               }else{
                   this.$message({
                       message:'该状态不可改变',
                       type:'success'
                   })
               }
            },
            add(){
                console.log(this.order);
                let order=JSON.parse(JSON.stringify(this.order));
                axios.post("/order2",order)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.$message({
                                message:'添加成功',
                                type:'success'
                            })
                        }
                        this.loadOrders(1);
                    })
            },
            dateChange(date){
                if (date == null){
                    return;
                }
                let Y = date.getFullYear() +  '-' ;
                let M = (date.getMonth()+1 < 10 ?  '0' +(date.getMonth()+1) : date.getMonth()+1) +  '-' ;
                let D = date.getDate() +  ' ' ;
                this.dealTime = Y+M+D;
            },
        },

        mounted(){
            this.loadOrders(1);
            this.loadUser();
            this.loadProducts();
            this.loadCustoms();
        }
    })
</script>
</body>
</html>
